<template>
  <view>
    <yy-paging
      v-model="dataList"
      @onRefresh="onRefresh"
      @query="queryList"
      ref="paging"
      :auto="true"
      @scroll="scroll"
      :refresher-enabled="true"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 黑名单 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[.875rem] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty text="你还没有拉黑任何人" url="/static/dddr108.png"></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-6 p-4">
        <view class="flex justify-between items-center" v-for="(i, k) in dataList" :key="k">
          <view class="flex gap-3 items-center" @click="vk.navigateTo('/pages/my/otherIndex?id=' + i.target_id)">
            <image
              :src="vk.myfn.handleImageUrl(i.target.avatar)"
              mode="aspectFill"
              class="w-[3rem] h-[3rem] rounded-full bg-gray-50"
            />
            <text class="font-[weight:500] text-[.9375rem]"> {{ i.target.nickname }} </text>
          </view>
          <!-- <view class="w-[4.5rem] h-[2.0625rem] bg-[#00A9AB] rounded-[1.0625rem] flex justify-center items-center" @click="blockUser(i)">
            <view class="text-[.75rem] text-[#FFFFFF]"> 拉黑 </view>
          </view> -->
          <view
            class="w-[4.5rem] h-[2.0625rem] bg-[#EBECEE] rounded-[1.0625rem] flex justify-center items-center"
            @click="unBlockUser(i)"
          >
            <view class="text-[.75rem] text-[#5C6068]"> 解除拉黑 </view>
          </view>
        </view>
      </view>
    </yy-paging>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        i: {}
      }
    },
    onLoad(options) {},
    onShow() {},
    methods: {
      async alertConfirm() {
        let d = await api.unBlackUser({
          target_id: this.i.target_id
        })
        vk.toast(d.msg, 300, e => {
          this.$refs.paging.refresh()
        })
      },
      unBlockUser(i) {
        this.i = i
        this.$refs.alert.config({
          show: true,
          title: '取消拉黑',
          describe: '确定要取消拉黑该用户吗？取消后对方将可以查看你的钓点并与你互动。',
          cancel: '再想想',
          cancelColor: '#000',
          confirm: '确定',
          confirmColor: '#FF3A56',
          eventType: 'cancelBlackout'
        })
      },

      onRefresh() {},
      returnToPage() {
        vk.navigateBack()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.blacklist({
          page,
          limit
        })
        this.$refs.paging.complete(res.data)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
